<template>
    <div>
        <!-- <el-card class="!border-none" shadow="never">
            <router-link :to="{path: getRoutePath('order.orderAdd')}">
                <el-button type="primary" >新增</el-button>
            </router-link>
        </el-card> -->
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                
                <el-table-column label="订单编号" prop="sn" min-width="100" />
                <el-table-column label="店名" prop="shop_title" min-width="120" />
                <el-table-column label="店员" prop="shop_name" min-width="100" />
                <el-table-column label="主材" prop="material" min-width="100" />
                <el-table-column label="客户姓名" prop="customer_name" min-width="120" />
                <el-table-column label="客户电话" prop="customer_mobile" min-width="120" />
                <el-table-column label="客户地址" prop="customer_address" min-width="120" />
                <el-table-column label="合同编号" prop="contract_no" min-width="120" />
                <el-table-column label="是否测量" prop="is_measure" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_measure == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="测量日期" prop="measure_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.measure_time ? timeFormat(row.measure_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="测量师傅" prop="measure_name" min-width="120" />
                <el-table-column label="测量图片" prop="measure_photos" min-width="120" >
                    <template #default="{ row }">
                        <div class="image-preview-container">
                            <el-image :src="getPhoto(row.measure_photos)" :preview-src-list="row.measure_photos != '' ? row.measure_photos.split(',') : []" :z-index="999999" :preview-teleported="true"/>
                            <div class="preview-overlay">
                                <el-icon :size="30"><ZoomIn /></el-icon> <!-- 使用 Element Plus 的放大镜图标 -->
                            </div>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="是否支付" prop="is_pay" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_pay == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.pay_time ? timeFormat(row.pay_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付金额" prop="pay_money" min-width="120" />
                <el-table-column label="支付图片" prop="pay_photos" min-width="120" >
                    <template #default="{ row }">
                        <el-image :src="row.pay_photos" />
                    </template>
                </el-table-column>
                <el-table-column label="是否改管" prop="is_change" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_change == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="改管时间" prop="change_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.change_time ? timeFormat(row.change_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="改管师傅" prop="change_name" min-width="120" />
                <el-table-column label="改管图片" prop="change_photos" min-width="120" >
                    <template #default="{ row }">
                        <el-image :src="row.change_photos" lazy/>
                    </template>
                </el-table-column>
                
                <el-table-column label="是否发货" prop="is_send" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_send == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发货时间" prop="send_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.send_time ? timeFormat(row.send_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否收货" prop="is_receive" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_receive == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货时间" prop="receive_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.receive_time ? timeFormat(row.receive_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否安装" prop="is_install" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.is_install == 1 ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="安装时间" prop="install_time" min-width="120" >
                    <template #default="{ row }">
                        <span>{{ row.install_time ? timeFormat(row.install_time * 1000) : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="安装师傅" prop="install_name" min-width="120" />
                <el-table-column label="安装图片" prop="install_photos" min-width="120" >
                    <template #default="{ row }">
                        <el-image :src="row.install_photos" lazy />
                    </template>
                </el-table-column>
                <el-table-column label="资料图片" prop="info_photos" min-width="120" >
                    <template #default="{ row }">
                        <div class="image-preview-container">
                            <el-image :src="getPhoto(row.info_photos)" :preview-src-list="row.info_photos != '' ? row.info_photos.split(',') : []" :z-index="999999" :preview-teleported="true"/>
                            <div class="preview-overlay">
                                <el-icon :size="30"><ZoomIn /></el-icon> <!-- 使用 Element Plus 的放大镜图标 -->
                            </div>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" min-width="120" />
                <el-table-column label="创建时间" prop="create_time" min-width="120" />
                <el-table-column label="订单状态" prop="order_status" min-width="120" >
                    <template #default="{ row }">
                        <span v-if="row.order_status == 0">已创建</span>
                        <span v-if="row.order_status == 1">已测量</span>
                        <span v-if="row.order_status == 2">已交底</span>
                        <span v-if="row.order_status == 3">已收款</span>
                        <span v-if="row.order_status == 4">已改管</span>
                        <span v-if="row.order_status == 5">已下单</span>
                        <span v-if="row.order_status == 6">已到货</span>
                        <span v-if="row.order_status == 7">已安装</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onActivated } from 'vue'; 
import { not_receive } from '@/api/order'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
import { timeFormat } from '@/utils/util'


const { pager, getLists, resetPage, resetParams } = usePaging({
	fetchFun: not_receive,
	params: {}
})

onMounted(() => {
	getLists()
})

const getPhoto = (list: string) => {
    let arr = list.split(',')
    return arr[0]
}


</script>

<style scoped>
    /* 容器样式 */
.image-preview-container {
  position: relative; /* 为内部绝对定位的元素提供参考 */
  display: inline-block; /* 让容器的大小包裹图片 */
  width: 100px; /* 设置容器大小，与 el-image 的 style 保持一致 */
  height: 100px;
  overflow: hidden; /* 隐藏溢出部分 */
  cursor: pointer; /* 鼠标悬停时显示手型，表示可点击 */
}

/* el-image 基础样式 */
.image-preview-container .el-image {
    width: 100%;
    height: 100%;
    display: block; /* 防止图片下方有空白 */
}

/* 占位符样式 */
.image-preview-container .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 20px; /* 调整图标大小 */
}

/* 预览叠加层样式 */
.image-preview-container .preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: #fff; /* 放大镜图标颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 添加过渡动画 */
  pointer-events: none; /* 关键：使鼠标事件穿透这个叠加层，点击直接作用于下方的 el-image */
  z-index: 1; /* 确保在图片上方，但低于可能的其他浮层（如预览弹窗本身） */
}

/* 容器悬停时显示叠加层 */
.image-preview-container:hover .preview-overlay {
  opacity: 1;
}

/* 可以为图标单独设置大小 */
.image-preview-container .preview-overlay .el-icon {
   font-size: 30px; /* 放大镜图标大小 */
}
</style>